<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<script src="/static/index/js/vue.js"></script>
	<script src="/static/index/js/moment.min.js"></script>
	<script src="/static/antd/dist/antd.js"></script>
	<link rel="stylesheet" href="/static/antd/dist/antd.css">
	<script src="/static/antd/dist/jquery.js"></script>
	<link rel="stylesheet" href="/static/antd/dist/myLogos.css">
	<link rel="stylesheet" href="/static/antd/dist/footer/style.css">
	<link rel="stylesheet" href="/static/antd/dist/footer/bootstrap.css">
</head>
<body>
<div id="app" style="min-width: 1332px;">
	<!-- 顶部 -->
	<div style="position: fixed; width: 100%; z-index: 999;top: 0;">
		<a-collapse>
			<a-collapse-panel style="font-size: 2rem; text-align: center" key="1"
							  th:header="${session.loginUser==null?'请登录':session.loginUser.nickname}">
				<a style="padding-left: 25px; color: cadetblue;" href="http://auth.shushan.com/login.html"
				   th:if="${session.loginUser==null}">登录</a>
				<div style="width: 50%; margin: 25px auto">
					<a-button @click="cart" type="primary" style="width: 100%;">
						购物车
					</a-button>
				</div>
				<div style="width: 50%; margin: 0 auto">
					<a-input-search
							v-model="keywordInput"
							placeholder="请输入关键字"
							enter-button="搜索"
							size="large"
							@search="onSearch"></a-input-search>
				</div>
				<br/>
				{{keywordInput}}
			</a-collapse-panel>
		</a-collapse>
	</div>

	<!-- 中间添加成功消息 -->
	<div>
		<a-card
				style="margin-top: 100px;
					 margin-bottom: 50px;
					  display: flex;
					  justify-content: center;
					   align-items: center;
			">
			<a-card
					hoverable
					style="width: 620px;  display: flex;  justify-content: center; align-items: center;"
			>
				<a-card hoverable style="box-shadow: 0 0 0 1px #0673ff;">
					<div class="desc">欢迎注册</div>
					<div class="dfg">
						<span>已有账号？</span>
						<a-button style="width: 100%; display: grid;" type="primary" th:href="'http://auth.shushan.com/login.html'">请登录</a-button>
					</div>
				</a-card>
				<section>
					<form action="/regist" method="post" class="one">
						<div class="tips" style="color: red" th:text="${errors!=null ? (#maps.containsKey(errors, 'msg')?errors.msg:'') : ''}">
						</div>
						<a-card hoverable class="register-box" style="width: 400px;">
							<label class="username_label">用 户 名
								<a-input style="width: 350px;" name="userName" maxlength="20" type="text" placeholder="您的用户名和登录名"></a-input>
							</label>
							<div class="tips" style="color: red" th:text="${errors!=null ? (#maps.containsKey(errors, 'userName')?errors.userName:'') : ''}">

							</div>
						</a-card>
						<a-card hoverable class="register-box" style="width: 400px;">
							<label class="other_label">设 置 密 码
								<a-input style="width: 350px;" name="password" maxlength="20" type="password" placeholder="建议至少使用两种字符组合"></a-input>
							</label>
							<div class="tips" style="color: red" th:text="${errors!=null ? (#maps.containsKey(errors, 'password')?errors.password:'') : ''}">
							</div>
						</a-card>
						<a-card hoverable class="register-box" style="width: 400px;">
							<label class="other_label">确 认 密 码
								<a-input style="width: 350px;" maxlength="20" type="password" placeholder="请再次输入密码"></a-input>
							</label>
							<div class="tips">

							</div>
						</a-card>
						<a-card hoverable class="register-box" style="width: 400px;">
							<label class="other_label">
								<span style="display: grid;">手 机</span>
								<a-input style="width: 350px;" name="phone" class="phone" maxlength="20" id="phoneNum" type="text" placeholder="建议使用常用手机"></a-input>
							</label>
							<div class="tips" style="color: red" th:text="${errors!=null ? (#maps.containsKey(errors, 'phone')?errors.phone:'') : ''}">

							</div>
						</a-card>
						<!--<a-card hoverable class="register-box" style="width: 400px;">
							<label class="other_label">
								验 证 码
								<a-input style="width: 240px;" name="code" maxlength="20" type="text" placeholder="请输入验证码" class="caa"></a-input>
							</label>

							<span id="code" style="width: 50px;
										height: 30px;
										background: cadetblue;
										display: inline-block;
										top: 0;
										position: relative;
										text-align: center;
										line-height: 30px;
										color: #fff;
										border-radius: 10%;"></span>
							&lt;!&ndash;<a id="sendCode" style="cursor: pointer">发送验证码</a>&ndash;&gt;
							<div class="tips" style="color: red" th:text="${errors!=null ? (#maps.containsKey(errors, 'code')?errors.code:'') : ''}">

							</div>
						</a-card>-->
						<a-card hoverable  class="submit_btn" style="width: 400px;" >
							<button style="width: 100%;
										background: #fff;
										border: none;
										box-shadow: 0 0 0 1px #0673ff;
										height: 35px;" type="submit" id="submit_btn">立 即 注 册</button>
						</a-card>
					</form>
				</section>
				<!--<a-button style="margin-top: 20px;" block type="default"  th:href="'http://item.shushan.com/'+${item.skuId}+'.html'">
					查看商品详情
				</a-button>-->
			</a-card>
		</a-card>
	</div>

	<!-- 底部 -->
	<div class="mkl_footer"
		 style="background-image: url('https://img.zcool.cn/community/01431c598be9d60000002129c119f6.jpg@1280w_1l_2o_100sh.jpg')">
		<div class="sub-footer" style="background: rgba(8 ,10 ,12, 0.8);">
			<div class="container">
				<div class="mkls_footer_grid">
					<div class="col-xs-4 mkls_footer_grid_left">
						<h4>地址:</h4>
						<p>贵州省贵阳市清镇市,
							<br> 云岭东路</p>
					</div>
					<div class="col-xs-4 mkls_footer_grid_left">
						<h4>联系</h4>
						<p>
							<span>电话 : </span>182 xxxx 8687</p>
						<p>
							<span>邮箱 : </span>
							<a href="#" style="color: #1890ff;">m182xxxx8687@163.com</a>
						</p>
					</div>
					<div class="col-xs-4 mkls_footer_grid_left">
						<h4>营业时间:</h4>
						<p>全天候</p>
						<p>每周五维护
							<span>(数据服务)</span>
						</p>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="footer-copy-right">
			<div class="container">
				<div class="allah-copy">
					<p>Copyright &copy; 2021.书山 <a href="http://shushan.com" target="_blank"></a></p>
				</div>
				<div class="footercopy-social">
					<ul>
						<li>
							<a href="#">
								<span class="fa fa-facebook"></span>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="fa fa-twitter"></span>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="fa fa-rss"></span>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="fa fa-vk"></span>
							</a>
						</li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!-- 底部锚点 -->
	<div>
		<a-back-top></a-back-top>
	</div>
	<!-- 返回主页按钮 -->
	<div style="position:fixed; top: 5px; right: 5px;">
		<a-affix :offset-top="top">
			<a-button th:href="'http://shushan.com'" type="primary">
				返回主页
			</a-button>
		</a-affix>
	</div>
</div>

<script>
	new Vue({
		el: '#app',
		data() {
			return {
				keywordInput: "",
				top: 50,
			}
		},
		methods: {
			onSearch() {
				// window.location.href="http://search.shushan.com/list.html?keyword="+keyword;
				location.href = "http://search.shushan.com/list.html?keyword="+this.keywordInput
				// console.log('搜索值',value);
			},
			cart() {
				window.location.href = "http://cart.shushan.com/cart.html";
			},
		}
	})

	$(function () {
		var stuList = getStuList(); //设置传送信息：信息的集合

		//聚焦失焦input
		$('input').eq(0).focus(function () {
			if ($(this).val().length === 0) {
				$(this).parent().next("div").text("支持中文，字母，数字，'-'，'_'的多种组合");
			}
		})
		$('input').eq(1).focus(function () {
			if ($(this).val().length === 0) {
				$(this).parent().next("div").text("建议使用字母、数字和符号两种以上的组合，6-20个字符");
			}
		})
		$('input').eq(2).focus(function () {
			if ($(this).val().length === 0) {
				$(this).parent().next("div").text("请再次输入密码");
			}
		})
		$('input').eq(3).focus(function () {
			if ($(this).val().length === 0) {
				$(this).parent().next("div").text("验证完后，你可以使用该手机登陆和找回密码");
			}
		})
		$('input').eq(4).focus(function () {
			if ($(this).val().length === 0) {
				$(this).parent().next().next("div").text("看不清？点击图片更换验证码");
			}
		})
		//input各种判断
		//用户名：
		$('input').eq(0).blur(function () {
			if ($(this).val().length === 0) {
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color", '#ccc');
			} else if ($(this).val().length > 0 && $(this).val().length < 4) {
				$(this).parent().next("div").text("长度只能在4-20个字符之间");
				$(this).parent().next("div").css("color", 'red');
			} else if ($(this).val().length >= 4 && !isNaN($(this).val())) {
				$(this).parent().next("div").text("用户名不能为纯数字");
				$(this).parent().next("div").css("color", 'red');
			} else {
				for (var m = 0; m < stuList.length; m++) {
					if ($(this).val() === stuList[m].name) {
						$(this).parent().next("div").text("该用户名已被注册");
						$(this).parent().next("div").css("color", 'red');
						return;
					}
				}
				$(this).parent().next("div").text("");
			}
		})
		//密码
		$('input').eq(1).blur(function () {
			if ($(this).val().length === 0) {
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color", '#ccc');
			} else if ($(this).val().length > 0 && $(this).val().length < 6) {
				$(this).parent().next("div").text("长度只能在6-20个字符之间");
				$(this).parent().next("div").css("color", 'red');
			} else {
				$(this).parent().next("div").text("");
			}
		})
		//	确认密码
		$('input').eq(2).blur(function () {
			if ($(this).val().length === 0) {
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color", '#ccc');
			} else if ($(this).val() != $('input').eq(1).val()) {
				$(this).parent().next("div").text("两次密码不匹配");
				$(this).parent().next("div").css("color", 'red');
			} else {
				$(this).parent().next("div").text("");
			}
		})
		//	手机号
		$('input').eq(3).blur(function () {
			if ($(this).val().length === 0) {
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color", '#ccc');
			} else if ($(this).val().substr(0, 3) !== 138 && $(this).val().substr(0, 3) != 189 && $(this).val().substr(0, 3) != 139 && $(this).val().substr(0, 3) != 158 && $(this).val().substr(0, 3) != 188 && $(this).val().substr(0, 3) != 157 || $(this).val().length != 11) {
				// $(this).parent().next("div").text("手机号格式不正确");
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color", 'red');
			} else {
				$(this).parent().next("div").text("");
			}
		})
		// 	验证码
		//	 验证码刷新
		function code() {
			var str = "qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPLKJHGFDSAZXCVBNM";
			var str1 = 0;
			for (var i = 0; i < 4; i++) {
				str1 += str.charAt(Math.floor(Math.random() * 62))
			}
			str1 = str1.substring(1)
			$("#code").text(str1);
		}

		code();
		$("#code").click(code);
		//	验证码验证
		$('input').eq(4).blur(function () {
			if ($(this).val().length === 0) {
				$(this).parent().next().next("div").text("");
				$(this).parent().next().next("div").css("color", '#ccc');
			} else if ($(this).val().toUpperCase() !== $("#code").text().toUpperCase()) {
				$(this).parent().next().next("div").text("验证码不正确");
				$(this).parent().next().next("div").css("color", 'red');
			} else {
				$(this).parent().next().next("div").text("");
			}
		})

		//  建立构造函数，构造学生信息模板
		function Student(name, password, tel, id) {
			this.name = name;
			this.password = password;
			this.tel = tel;
			this.id = id;
		}

		//	获取之前所有已经注册的用户集合
		function getStuList() {
			var list = localStorage.getItem('stuList');
			if (list != null) {
				return JSON.parse(list);
			} else {
				return new Array();
			}
		}

	})

</script>
</body>
</html>